<template>
<div class="date-show-root">
  <div class="weekview">
    <div v-for="(item,index) in weekview" v-model="weekview" class="weekItem" :class="item.style" :key="index">
      <div class="text">{{item.text}}</div>
      <div class="num" @mouseover ="moveHandler(item,$event,index)" @mouseup ="upHandler(item,$event,index)" @mousedown ="downHandler(item,$event,index)"><div class="numit">{{item.num}}</div></div>
    </div>
  </div>
  <div class="numview">
    <div class="view-left" >{{right.month}}月</div>
    <div class="view-right">
      <div class="days">{{right.days}}日</div>
      <div class="year">{{right.year}}年</div>
    </div>
  </div>
</div>
</template>

<script>
import moment from 'moment'
import {range} from 'utils'
let weektexts = '日一二三四五六'
let flag = false
let weekview = []
let startIndex
let timeBegin
let timeEnd
let oneTime

export default {
  name: 'date-show',
  props: ['data'],
  data(){
    return{
      flag,
      weekview,
      startIndex,
      timeBegin,
      timeEnd,
      oneTime,
      ismove:false,
      months:1,
      condition:[]
    }
  },
  mounted(){
    this.condition = this.data
    this.weekview = []
    this.weekviews()
    this.weekview[this.weekview.length-1].style="chose"
    this.months = parseInt(this.numview.month)
    this.utime(this.condition.startTime,this.condition.endTime)
  },
  computed: {
    right(){
      let t={}
      t.year = moment(this.condition.endTime).get('year')
      t.month = moment(this.condition.endTime).get('month')+1
      t.days = moment(this.condition.endTime).get('date')
      return t
    },
    range(){
      let startDay =  moment()
      let endDay =  moment()
      let start = moment(startDay).startOf('d')
      let end = moment(endDay).startOf('d')
      return {start, end}
    },
    numview(){
      let out = {}
      let endDay = this.range.end
      out.month = endDay.format('M月')
      out.year = endDay.format('YYYY年')
      out.days = endDay.format('DD日')
      return out
    },
  },
  watch:{
    condition:{
      handler:function(val,oldVal){
          this.utime(val.startTime,val.endTime)
        },
      deep:true
    }
  },
  methods:{
    weekviews(){
      let startDay = this.range.start
      let endDay = this.range.end
      let days = endDay.diff(startDay, 'd')
      for(let i of range(7)){
        let day = endDay.clone().subtract(i,'d')
        let style = ''
        if(days > 0 && i < days){
          style = 'active'
        }else if(days > 0 && i == days){
          style = 'active left'
        }
        this.weekview.unshift({
          text: weektexts[day.weekday()],
          num: day.date(),
          style,
          nowTime:moment(day).format('YYYY-MM-DD HH:mm:ss')
        })
      }
    },
    utime(s,e){
      let startDay = moment(s)
      let endDay = moment(e)
      let days = parseInt(endDay.diff(startDay, 'd'))
      let end = endDay.startOf('d').format('YYYY-MM-DD HH:mm:ss')
      let start = startDay.startOf('d').format('YYYY-MM-DD HH:mm:ss')
      this.weekview.map(v=>v.style='')
      let endIndex = -1
      let startIndex = -1
      for(let i=0;i<this.weekview.length;i++){
        if(this.weekview[i].nowTime==end){
          endIndex = i
        }
        if(this.weekview[i].nowTime==start){
          startIndex = i
        }
        if(days>0&&endIndex!=-1&&startIndex!=-1){
          this.weekview[endIndex].style='active end'
          this.weekview[startIndex].style='active first'
          for(let j=startIndex+1;j<endIndex;j++){
            this.weekview[j].style='active'
          }
        }else if(days>0&&endIndex!=-1&&startIndex==-1){
          this.weekview[endIndex].style='active end'
          for(let j=0;j<endIndex;j++){
            this.weekview[j].style='active'
          }
        }else if(days == 0&&endIndex!=-1){
            this.weekview[endIndex].style='chose'
        }
      }
    },
      // 鼠标按下
    downHandler(item,e,index){
      this.ismove = false
      this.weekview.forEach((value)=>{
        value.style=''
      })
      this.flag = true
      item.style = 'chose'
      this.startIndex = index
    },
    // 鼠标移动
    moveHandler(item,e,index){
      if(this.flag==true){
        this.ismove = true
        item.style = 'chose'
        for(let i =0;i<this.weekview.length;i++){
          if(i==this.startIndex||i==index){
            continue;
          }
          this.weekview[i].style=''
        }
        let min = this.startIndex>index?index:this.startIndex
        let max = this.startIndex>index?this.startIndex:index
        this.weekview[min].style='active first'
        this.weekview[max].style='active end'
        for(let i =min+1;i<max;i++){
          this.weekview[i].style='active'
        }
      }
    },
    // 鼠标抬起
    upHandler(item,e,index){
      this.flag=false
      if(this.ismove==false){
        this.oneTime = this.weekview[this.startIndex].nowTime
        let m = moment(this.oneTime).startOf('day').format('YYYY-MM-DD HH:mm:ss')
        let e = moment(this.oneTime).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.$emit('setTime',[m,e])
      }
      if(this.ismove==true){
        for(let i=0;i<this.weekview.length;i++){
          if (this.weekview[i].style=='active first') {
            this.timeBegin = this.weekview[i].nowTime
          }
          if (this.weekview[i].style=='active end') {
            this.timeEnd = this.weekview[i].nowTime
          }
        }
        let m = moment(this.timeBegin).startOf('day').format('YYYY-MM-DD HH:mm:ss')
        let e = moment(this.timeEnd).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        this.$emit('setTime',[m,e])
      }
    }

  }
}
</script>

<style lang="stylus" scoped>
.month
  transform translateX(2.5rem) translateY(-0.8rem)
  span
    cursor pointer
    color #c3c3c3
  .monthDown
    transform translateY(2rem)
    width 60px !important
.weekview
  border-left 1px solid #dcdcdc
  border-right @border-left
  overflow hidden
  float left
  user-select none
  -webkit-user-select none

.weekItem
  float left
  width 3.6rem
  text-align center
  >.text
    border-bottom 1px solid #dcdcdc
    line-height 1.8rem
    font-size 14px
    color #898989
  >.num
    line-height 2.7rem
    position relative
    cursor pointer
    font-size 16px
    >.numit
      position relative
      z-index 1
  >.num:after
    content ''
    display none
    position absolute
    box-sizing border-box
    left .85rem
    top .4rem
    height 1.9rem
    width @height
    border-radius 50%
    border 1px solid #e85a47
    background white

.weekItem.active
  >.num
    color white
  >.num:before
    content ''
    position absolute
    left 0
    top .4rem
    height 1.9rem
    width 100%
    background #f19c91
.weekItem.active.first
  >.num 
    color #e85a47
  >.num:after
    display block
  >.num:before
    display block
    width 1.8rem
    left auto
    right 0
.weekItem.active.end
  >.num 
    color #e85a47
  >.num:after
    display block
  >.num:before
    display block!important
    width 1.8rem

.weekItem.chose
  >.num 
    color #e85a47
  >.num:after
    display block
  >.num:before
    width 1.8rem

.weekItem.active.left
  >.num:after
    display block
    background #e85a47
  >.num:before
    width 1.8rem
    left auto
    right 0

.numview
  float left
  width 10rem
  padding 1.2rem
  line-height 1
  >.view-left
    font-size 2.2rem
    float left
    margin-right .6rem
  >.view-right
    float left
    font-size 0.75rem
    >.days
      color #666666
      margin-bottom .75rem
    
@media screen and (max-width: 1450px) 
	  .numview
      width:7rem;

@media screen and (max-width: 1400px) 
	  .numview
      display none
</style>